<!-- filepath: d:\Dev\video-classifier\fronted\src\components\ResultPreview.vue -->
<template>
    <div class="result-preview">
      <el-card class="result-card">
        <template #header>
          <div class="card-header">
            <h3>处理结果</h3>
            <el-button 
              size="small"
              @click="refresh"
              :loading="loading"
            >
              刷新
            </el-button>
          </div>
        </template>
        
        <div v-if="loading" class="loading-container">
          <el-skeleton :rows="3" animated />
        </div>
        
        <div v-else-if="results.length === 0" class="empty-results">
          暂无处理结果
        </div>
        
        <el-table 
          v-else
          :data="results" 
          style="width: 100%"
          max-height="400"
        >
          <el-table-column prop="name" label="文件名" min-width="150" />
          <el-table-column prop="category" label="分类" width="120" />
          <el-table-column prop="status" label="状态" width="80">
            <template #default="scope">
              <el-tag :type="getStatusType(scope.row.status)">
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="180" />
        </el-table>
      </el-card>
    </div>
  </template>
  
  <script>
  import { ref } from 'vue';
  import { ElMessage } from 'element-plus';
  import searchService from '@/services/searchService';
  
  export default {
    name: 'ResultPreview',
    props: {
      category: {
        type: String,
        default: ''
      },
      limit: {
        type: Number,
        default: 10
      }
    },
    setup(props) {
      const results = ref([]);
      const loading = ref(false);
      
      const refresh = async () => {
        loading.value = true;
        try {
          const response = await searchService.searchVideos(
            '', // 空查询获取最新结果
            props.category,
            null,
            null,
            1,
            props.limit
          );
          
          if (response.success) {
            results.value = response.data;
          } else {
            ElMessage.error(response.message || '获取结果失败');
          }
        } catch (error) {
          ElMessage.error('获取结果失败: ' + error.message);
        } finally {
          loading.value = false;
        }
      };
      
      const getStatusType = (status) => {
        switch (status) {
          case '完成': return 'success';
          case '处理中': return 'warning';
          case '失败': return 'danger';
          default: return 'info';
        }
      };
      
      // 初始加载
      refresh();
      
      return {
        results,
        loading,
        refresh,
        getStatusType
      };
    }
  };
  </script>
  
  <style scoped>
  .result-preview {
    margin-top: 20px;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .loading-container {
    padding: 20px 0;
  }
  
  .empty-results {
    padding: 30px 0;
    text-align: center;
    color: #909399;
  }
  </style>